@require "./variables.styl"
@require "./mixin.styl"

button-variant($background, $border, $hover-background = darken($background, 7.5%), $hover-border = darken($border, 10%), $active-background = darken($background, 10%), $active-border = darken($border, 12.5%))
  color color-yiq($background)
  background-color $background
  border-color $border
  &:hover
    color color-yiq($hover-background)
    background-color $hover-background
    border-color $hover-border
  &.disabled,
  &:disabled
    color color-yiq($background)
    background-color $background
    border-color $border
  &.focus,
  &:focus
    box-shadow 0 0 0 $width-btn-focus rgba($border, .5)
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active
    color color-yiq($active-background)
    background-color $active-background
    border-color $active-border
    &.focus,
    &:focus
      box-shadow 0 0 0 $width-btn-focus rgba($border, .5)

button-outline-variant($color, $color-hover = color-yiq($color), $active-background = $color, $active-border = $color)
  color $color
  background-color transparent
  background-image none
  border-color $color
  &:hover
    color $color-hover
    background-color $active-background
    border-color $active-border
  &:focus,
  &.focus
    box-shadow 0 0 0 $width-btn-focus rgba($color, .5)
  &.disabled,
  &:disabled
    color $color
    background-color transparent
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active
    color color-yiq($active-background)
    background-color $active-background
    border-color $active-border
    &:focus
      box-shadow 0 0 0 $btn-focus-width rgba($color, .5)

button-link-variant($color)
  color $color
  background-color transparent
  &.hover,
  &:hover
    color darken($color, 15%)
    text-decoration $decoration-btn-link
    background-color transparent
    border-color transparent
  &:focus,
  &.focus
    text-decoration $decoration-btn-link-hover
    border-color transparent
    box-shadow: none
  &:disabled,
  &.disabled
    opacity $opacity-btn-disabled
    pointer-events none

button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius)
  padding $padding-y $padding-x
  font-size $font-size
  line-height $line-height
  border-radius $border-radius


.btn
  display inline-block
  text-align center
  white-space nowrap
  vertical-align middle
  user-select none
  border 1px solid transparent
  transition $transition-btn
  text-decoration none
  button-size($padding-y-btn, $padding-x-btn, $font-size-btn-default, $line-height-base, $border-radius-btn)

  &:focus,
  &.focus
    outline 0

  &.disabled,
  &:disabled
    opacity $opacity-btn-disabled
    box-shadow none

  &:not(:disabled):not(.disabled)
    cursor pointer


  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active
    background-image none

a.btn.disabled
  pointer-events: none;

.btn-lg
  button-size($padding-y-btn-lg, $padding-x-btn-lg, $font-size-btn-lg, $line-height-btn-lg, $border-radius-btn-lg)
.btn-sm
  button-size($padding-y-btn-sm, $padding-x-btn-sm, $font-size-btn-sm, $line-height-btn-sm, $border-radius-btn-sm)
.btn-xs
  button-size($padding-y-btn-xs, $padding-x-btn-xs, $font-size-btn-xs, $line-height-btn-xs, $border-radius-btn-xs)

for $key, $value in $theme-colors
  .btn-{$key}
    button-variant($value, $value)

for $key, $value in $theme-colors
  .btn-outline-{$key}
    button-outline-variant($value)

.btn-link
  button-link-variant($color-btn-link)

for $key, $value in $theme-colors
  .btn-link-{$key}
    button-link-variant($value)
